<template>
	<!-- 种植方案 -->
	<div class="farm-card-main">
		<el-card :body-style="{
        padding: 0,
        margin: '10px',
        borderRadius: '10px',
        borderRadius: '14px',
      }" shadow="always">
			<div>
				<el-card :body-style="{
            padding: '10px',
            margin: 0,
            borderRadius: '10px',
            borderRadius: '14px',
          }" shadow="always">
					<div class="farm-item-container">
						<div class="list_">
							<div class="list-left">
								<img src="../../../../../assets/img/moractiveBg.jpeg" width="90" />
								<div class="plant_info">
									<div class="plant_infotop">
										<span
											style="font-weight: 700; font-size: 22px; margin: 0 15px">{{ stockItemData.plantName }}</span>
										<span class="text">{{ stockItemData.plantBreed }}</span>
										<span class="text">{{ stockItemData.plantMode }}亩</span>
										<span class="text">{{ stockItemData.sowingDensity }}万株/亩</span>
									</div>
									<div class="core">
										<div style="padding-bottom: 10px">
											预计产量：<span
												style="color: rgba(248, 70, 58, 0.973)">{{ stockItemData.yield || "暂无产量信息" }}亩</span>
										</div>
										<div>创建时间：{{ stockItemData.sowTime }}</div>
									</div>
								</div>
							</div>
							<div class="list-right">
								<span @click="endPlantClick">结束种植</span>
							</div>
						</div>
					</div>
				</el-card>
			</div>
		</el-card>
		<!-- 结束种植弹框 -->
		<el-dialog title="结束种植" :visible.sync="centerDialogVisible" width="50%" center>
			<el-form ref="form" :model="endParmas" label-width="80px">
				<el-form-item label="单价:">
					<el-input v-model="endParmas.price"></el-input>
				</el-form-item>
				<el-form-item label="产量:">
					<el-input v-model="endParmas.yield"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="centerDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="addSurclick">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		queryPlantByLandId,
		endLand
	} from '@/api/farmEvent'
	export default {
		data() {
			return {
				listParames: {},
				// 种植方案数据
				stockItemData: {
					plantName: '',
					plantBreed: '',
					plantMode: '',
					sowingDensity: '',
					yield: '',
					sowTime: '',
					// name: '水稻',
					// varieties: '龙稻240', // 水稻品种
					// varietiesnum: '60', // 总亩数
					// plantnum: '20',
					// CreationTime: '2021-5-21至2021年6月6日', // 创建时间
					// ton: '178' // 产量
				},
				centerDialogVisible: false, //结束种植弹框
				endParmas: { // 结束种植参数
					id: '',
					plant: '',
					price: '',
					yield: ''
				},
			}
		},
		async mounted() {
			this.listParames = JSON.parse(localStorage.getItem('listParames'))
			this.landInfo =
				sessionStorage.getItem('massifDetails') &&
				JSON.parse(sessionStorage.getItem('massifDetails'))
			// console.log(sessionStorage)
			this.$nextTick(() => {
				// this.setDetailInfo(this.landInfo)
				this.getList()
			})
		},
		methods: {
			setDetailInfo(info) {
				this.detailInfo = info
				sessionStorage.setItem('massifDetalis', JSON.stringify(this.detailInfo))
				console.log('massifDetalis', info)
				const details = JSON.parse(sessionStorage.getItem('massifDetails'))
			},

			// 获取种植方案数据
			async getList() {
				const response = await queryPlantByLandId(this.listParames.id)
				if (response.data.code == 200) {
					// 种植方案种植
					this.stockItemData = response.data.data
					// 给父组件种植方案页面传值
					this.$emit('childerData', response.data.data)
				}
			},

			// 结束种植 弹框出现
			endPlantClick() {
				this.centerDialogVisible = true
			},
			// 结束种植提交
			async addSurclick() {
				// 结束种植参数取值
				this.endParmas.id = this.stockItemData.id?this.stockItemData.id:''
				this.endParmas.plant = this.stockItemData.plantName?this.stockItemData.plantName:''
				// 单价和产品拿到之后在这赋即可
				const response = await endLand(this.endParmas)
				if (response.data.code == 200) {
					// 成功后弹出成功弹框
					this.$message({
						type: 'success',
						message: response.data.msg
					})
					this.centerDialogVisible =false
					location.reload();
				}
			}

		}
	}
</script>

<style scoped>
	.farm-item-container {
		/* padding: 16px; */
		display: flex;
		justify-content: space-between;
		margin: 10px;
		/* border-bottom: 1px solid #c4cec9; */
	}

	.farm-item-container .plant_infotop {
		margin-bottom: 35px;
	}

	.text {
		padding: 3px 6px;
		margin: 0 10px 10px 10px;
		font-size: 14px;
		color: #11c26d;
		border: 1px solid #11c26d;
	}

	.core {
		margin: 0 15px;
		/* display: flex; */
	}

	.list_ {
		display: contents;
	}

	.list-left {
		display: flex;
	}

	.list_ .list-right {
		margin-top: 30px;
		font-size: 20px;
		/* padding-right: 60px; */
		margin-top: 70px;
		cursor: pointer;
	}

	.list-right span {
		border: 1px solid rgba(248, 70, 58, 0.973);
		color: rgba(248, 70, 58, 0.973);
		font-size: 16px;
		padding: 5px 8px;
		/* margin-bottom: 30px; */

		text-align: center;
		width: 60%;
	}
</style>
